<template>
  <div style="width: 100%;background-color: #FFFFFF;">
    <!--设置查询条件-->
    <div class="querycondition" style="margin-left: 10px;">
      <el-form :inline="true" :model="searchForm" style="margin-top: 10px">
        <el-form-item label="姓名">
          <el-input v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="省市">
          <el-select v-model="searchForm.region">
            <el-option label="上海" value="shanghai"></el-option>
            <el-option label="北京" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <div style="margin-bottom: 20px">
        <el-button type="primary" round icon="el-icon-circle-plus" @click="dialogFormVisible = true">添加</el-button>
        <el-button type="danger" round icon="el-icon-delete">删除</el-button>
      </div>
    </div>
    <!--内容区-->
    <div style="margin-left: 10px;">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          >
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="300">
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-search" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="primary" size="small" icon="el-icon-edit" @click="editForm(scope.$index,scope.row)">编辑</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteRow(scope.$index,tableData)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="pagination" style="padding-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>

    <!--添加-->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="700px">

      <el-form :model="addForm">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>


        <el-row>
          <el-col span="12">
            <el-form-item label="省" :label-width="formLabelWidth" class="el-form-item">
              <el-select v-model="addForm.province" placeholder="请选择活动省">
                <el-option label="北京市" value="shanghai"></el-option>
                <el-option label="重庆市" value="beijing"></el-option>
                <el-option label="上海市" value="beijing"></el-option>
                <el-option label="河南省" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="市" :label-width="formLabelWidth">
              <el-select v-model="addForm.province" placeholder="请选择活动市">
                <el-option label="西安市" value="shanghai"></el-option>
                <el-option label="咸阳市" value="beijing"></el-option>
                <el-option label="渭南市" value="beijing"></el-option>
                <el-option label="商洛市" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="addForm.address" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮政编码" :label-width="formLabelWidth">
          <el-input v-model="addForm.zip" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveFrom()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        currentPage4:1,
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '张三',
          province: '北京',
          city: '房山区',
          address: '北京市房山区',
          zip: 200331
        }, {
          date: '2016-05-04',
          name: '李四',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }],
        searchForm: {
          user: '',
          region: ''
        },
        addForm:{
          data:'',
          name:'',
          province:'',
          city:'',
          address:'',
          zip:'',
          type:''
        },
        formLabelWidth: '70px',
        dialogFormVisible: false
      }
    },
    methods:{
      onSubmit() {
        console.log('submit!');
      },
      handleClick(row) {
        console.log(row);
      },
      saveFrom(){
        this.tableData.push(this.addForm);
        this.dialogFormVisible=false;
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },
      editForm(index,row){
        console.info('-----'+index+'-------');
        console.info(row);
        this.dialogFormVisible = true;
        this.addForm = Object.assign({}, row);
      },
      deleteRow(index,tableData){
        tableData.splice(index,1);
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }
    }
  }
</script>

<style scoped>
  div {
    border-radius: 5px
  }

  .el-form-item{
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    vertical-align: top;
  }

  .pagination{
    vertical-align:middle;
    /*height: 50px;*/
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: right;
  }

  .el-pagination{
    line-height: 200px;
  }

  .el-form-item{
    display: block;
  }

  .querycondition div{
    display: inline-block;
  }

</style>
